<template>
  <div class="date-picker">
    <div class="back-fiexd mb-12px">
      <div class="go-out-time">外出时间</div>
    </div>
    <div class="date-picker_body">
      <div v-if="type != 'range'" class="body__time-trigger">
        <div class="time__value" @click="_setDateTime()">{{ value }}</div>
      </div>
      <!-- <div class="start-time">起止日期</div> -->
      <Calendar
        v-model="calendarValue"
        visible-type="full"
        :type="type"
        :row-height="32"
        :showBottomArrow="false"
        :allowSame="allowSame"
      />
      <div class="start-time">选择时间</div>
      <div v-if="type === 'range'" class="body__time-trigger mt-12px mb-24px">
        <div class="time__value" @click="_setDateTime(0)">
          {{ value[0] | filterDateTime }}
        </div>
        <span class="px-4px timeText">至</span>
        <div class="time__value" @click="_setDateTime(1)">
          {{ value[1] | filterDateTime }}
        </div>
      </div>
    </div>
    <Popup v-model="showTime" round position="bottom" safe-area-inset-bottom>
      <DatetimePicker
        type="time"
        title="选择时间"
        @confirm="_timeConfirm"
        @cancel="showTime = false"
      />
    </Popup>
    <!-- 底部 -->
    <div class="footer-fiexd">
      <div class="footer flex items-center">
        <button type="button" @click="$emit('cancel')" class="toolbar__cancel">
          取消
        </button>
        <div class="toolbar__line"></div>
        <button type="button" @click="_confirm" class="toolbar__confirm">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from "../ll-calendar";
import moment from "moment";
import { DatetimePicker, Popup, Toast } from "vant";
export default {
  props: {
    type: {
      type: String,
      default: "single",
      validator: (val) => {
        return ["single", "range"].includes(val);
      },
    },
    title: {
      type: String,
      default: "",
    },
    allowSame: {
      type: Boolean,
      default: false,
    }, //是否允许日期范围的起止时间为同一天
  },
  components: {
    Calendar,
    Popup,
    DatetimePicker,
  },
  filters: {
    filterDateTime(val) {
      return moment(val).format("MM-DD HH:mm");
    },
  },
  data() {
    return {
      showTime: false,
      changeTimeIndex: null,
      value:
        this.type === "single"
          ? moment().format("YYYY-MM-DD HH:mm:ss")
          : [
              moment()
                .set("hour", 9)
                .set("minute", 30)
                .set("second", 0)
                .format("YYYY-MM-DD HH:mm:ss"),
              moment()
                .set("hour", 18)
                .set("minute", 0)
                .set("second", 0)
                .format("YYYY-MM-DD HH:mm:ss"),
            ],
    };
  },
  computed: {
    calendarValue: {
      get() {
        return this.value;
      },
      set(val) {
        if (Array.isArray(val)) {
          this.value = [
            moment(val[0])
              .set("hour", 9)
              .set("minute", 30)
              .set("second", 0)
              .format("YYYY-MM-DD HH:mm:ss"),
            moment(val[1])
              .set("hour", 18)
              .set("minute", 0)
              .set("second", 0)
              .format("YYYY-MM-DD HH:mm:ss"),
          ];
        } else {
          this.value = moment(val).format("YYYY-MM-DD HH:mm:ss");
        }
      },
    },
  },
  methods: {
    _confirm() {
      if (this.type === "range") {
        const start = moment(this.value[0]).format("X");
        const end = moment(this.value[1]).format("X");
        if (end < start) {
          Toast("开始时间不能小于结束时间");
          return;
        }
        this.$emit("confirm", this.value);
      } else {
        this.$emit("confirm", this.value);
      }
    },
    _setDateTime(index = null) {
      console.log("888");
      if (index !== null) {
        this.changeTimeIndex = index;
      }
      this.$nextTick(() => {
        this.showTime = true;
      });
    },
    _timeConfirm(val) {
      if (this.type === "range") {
        this.value[this.changeTimeIndex] = `${moment(
          this.value[this.changeTimeIndex]
        ).format("YYYY-MM-DD")} ${val}:00`;
      } else {
        this.value = `${moment(this.value).format("YYYY-MM-DD")} ${val}:00`;
      }
      this.$nextTick(() => {
        this.showTime = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.date-picker {
  @apply flex flex-col;
  padding-bottom: env(safe-area-inset-bottom);
  .date-picker_toolbar {
    height: 44px;
    @apply flex items-center justify-between;
    .toolbar__cancel,
    .toolbar__confirm {
      height: 100%;
      padding: 0 16px;
      font-size: 14px;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .toolbar__confirm {
      color: #1d6fe9;
    }
    .toolbar__cancel {
      color: #969799;
    }
    .toolbar__title {
      @apply max-w-1/2 font-500 text-16px leading-20px text-center;
    }
  }
  .date-picker_body {
    // @apply h-300px;
    .body__time-trigger {
      @apply flex items-center px-16px;
      .time__value {
        @apply flex-1 text-center rounded-4px py-4px;
        background-color: #f7f8fa;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        border-radius: 8px;
      }
    }
    .start-time {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 24px 0 10px 12px;
    }
  }

  .go-out-time {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin: 20px 0 0 12px;
  }
  .footer-fiexd {
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    position: absolute;
    bottom: 0;
    .footer {
      width: 375px;
      background: #ffffff;
      box-shadow: 0px -1px 1px 0px #f5f5f5;
      .toolbar__cancel {
        width: 187px;
        height: 50px;
        @include minxi-fontstyle(14px, 500, #666666);
      }
      .toolbar__line {
        width: 1px;
        height: 20px;
        background: #f0f0f0;
      }
      .toolbar__confirm {
        width: 187px;
        height: 50px;
        @include minxi-fontstyle(14px, 500, #1d6fe9);
      }
    }
  }
  .timeText {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    font-family: PingFangSC-Medium, PingFang SC;
  }
}
</style>
